<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>First Study</title>
    <link type="text/css" href="resources/common.css" rel="stylesheet" />
</head>
<body>
    <canvas id="c"></canvas>
</body>
<script  id="vertex-shader-2d" type="x-shader/x-vertex">

  // an attribute will receive data from a buffer
  attribute vec2 a_position;

  uniform vec2 u_resolution;

  // all shaders have a main function
  void main() {
    vec2 clipSpace = a_position / (u_resolution / 2.0);
    // gl_Position is a special variable a vertex shader
    // is responsible for setting
    gl_Position = vec4(clipSpace, 0, 1);
  }
</script>
<script  id="fragment-shader-2d" type="x-shader/x-fragment">

  // fragment shaders don't have a default precision so we need
  // to pick one. mediump is a good default
  precision mediump float;

  void main() {
    // gl_FragColor is a special variable a fragment shader
    // is responsible for setting
    gl_FragColor = vec4(1, 0, 0.5, 1); // return redish-purple
  }
</script>
<script src="resources/webgl-utils.js"></script>
<script src="resources/first_test.js"></script>
</html>